<!-- 这是导航页的 Header 组件，组件的 Title 靠左或居中 -->
<template>
    <el-header class="header">
        <div :class="[isLeft && 'header-left', isCenter && 'header-center']">
            <div>
                <h3>{{ props.headerTitle.title }}</h3>
            </div>
        </div>
    </el-header>
</template>
<script setup name="header">
import { onMounted,ref } from 'vue';
const isLeft = ref('');
const isCenter = ref('');
// 获取父组件传递来的值
const props = defineProps(['headerTitle']);
onMounted(() => {
    if(props.headerTitle.aline === 'left') {
        isLeft.value = true;
    }
    if(props.headerTitle.aline === 'center') {
        isCenter.value = true;
    }
});
</script>
<style scoped>
.header {
    width: 100vw;
    height: 60px;
    background-color: #8ca5c0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.header-left {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>